<script setup lang="ts">
import useGoods from '@/hooks/useGoods'
const { prieveImg, goods, goodsBanner, num, changeImg, handleChange, addOrder } = useGoods()
window.scrollTo(0, 0)
</script>
<template>
  <div style="width: 1200px; margin: 50px auto">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="good_img">
          <img :src="prieveImg" alt="" srcset="" />
        </div>
        <div class="img_arr">
          <img
            v-for="(item, index) in goodsBanner"
            :key="index"
            :src="item"
            alt=""
            @click="changeImg(item)"
          />
        </div>
      </el-col>
      <el-col :span="16">
        <div class="good_name">{{ goods.goods_name }}</div>
        <div class="good_price_content">
          <div class="goods_price_title">价 格：</div>
          <div style="font-size: 14px; color: #a2a2a2; text-align: left">
            <div style="height: 30px; line-height: 30px">官网价：￥{{ goods.primary_price }}</div>
            <div style="height: 30px; line-height: 30px">
              市场价：<span style="font-size: 22px; color: #ff0000">￥{{ goods.price }}</span>
            </div>
          </div>
        </div>
        <div class="goods_stock">
          <div class="goods_price_title">库 存：</div>
          {{ goods.goods_stock }}
          <div
            v-if="goods.goods_stock * 1 == 0"
            style="
              margin-left: 10px;
              height: 50px;
              display: flex;
              align-items: center;
              color: #a2a2a2;
            "
          >
            [<span style="color: #ff0000">无货</span>]暂时无货，等待卖家添加库存
          </div>
        </div>
        <div class="goods_rank">
          <div>累计销售 <span>0</span></div>
          <div>累计评论 <span>0</span></div>
          <div>收藏数 <span>0</span></div>
        </div>
        <div class="goods_service">
          <div class="goods_price_title">服务说明：</div>
          无服务
        </div>
        <div class="goods_pay">
          <div class="goods_price_title">商品编码：</div>
          {{ goods.sku }}
        </div>
        <div class="goods_handle">
          <el-input-number
            v-model="num"
            :min="1"
            :max="goods.goods_stock * 1"
            @change="handleChange"
          />
          <!-- <div
            style="
              display: flex;
              align-items: center;
              margin-left: 20px;
              font-size: 14px;
              color: #a2a2a2;
              cursor: pointer;
            "
          >
            <el-icon color="#409EFC" :size="17" class="no-inherit">
              <Star />
            </el-icon>
            <el-icon color="#409EFC" :size="20" class="no-inherit">
              <StarFilled />
            </el-icon>
            收藏
          </div> -->
        </div>
        <div class="goods_bottom">
          <el-button type="primary" size="large" @click="addOrder">提交订单</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 50px">
      <el-col :span="24">
        <div class="goods_description">
          <div class="goods_description_title">
            <div>商品详情</div>
          </div>
          <div class="goodsDescription" v-html="goods.goods_details"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.bofy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 140px;
}
.good_img {
  height: 350px;
  width: 350px;
  img {
    @extend .good_img;
  }
}
.img_arr {
  display: flex;
  margin-top: 20px;
  height: 84px;
  width: 350px;
  overflow: auto;
  img {
    cursor: pointer;
    border: 1px #ddd solid;
    height: 80px;
    width: 80px;
    margin-right: 10px;
  }
}
.good_name {
  font-size: 20px;
  color: #2a2a2a;
  text-align: left;
}
.good_price_content {
  height: 60px;
  width: 100%;
  margin-top: 10px;
  background-color: #eee;
  display: flex;
}
.goods_price_title {
  font-size: 14px;
  padding: 10px 0 10px 10px;
  letter-spacing: 5px;
}
.goods_stock {
  height: 50px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.goods_rank {
  height: 40px;
  width: 100%;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  color: #a2a2a2;
  div {
    width: 33%;
    text-align: center;
    span {
      color: #3497e5;
    }
  }
  div:nth-child(2) {
    border-left: 1px dashed #ccc;
    border-right: 1px dashed #ccc;
  }
}
.goods_service {
  display: flex;
  align-items: center;
  height: 40px;
  width: 100%;
  text-align: left;
}
.goods_pay {
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  text-align: left;
}
.goods_handle {
  display: flex;
  align-items: center;
}
.goods_bottom {
  margin-top: 20px;
  text-align: left;
}
.goods_description {
  width: 100%;
  border: 1px #a2a2a2 solid;
}
.goods_description_title {
  height: 50px;
  border-bottom: 2px #3497e5 solid;
  display: flex;
  div {
    padding: 0 20px;
    font-size: 14px;
    line-height: 50px;
    color: #fff;
    background-color: #3497e5;
  }
}
.goodsDescription {
  ::v-deep(img) {
    max-width: 100%;
  }
}
</style>
